:root {
    --white-color: #fff; 
    --black-color: #141414; 


    --t-primary-color: #11b0a0;
    --t-muted-background: fadeout(hsla(172, 48%, 53%, 1), 85%);
    --t-text-color: var(--black-color);
    --t-muted-color: #505a68;       
    --t-light-color: #89878a;    
  
    --t-highlight-color: var(--t-primary-color);
    --t-container-background: #fbfbfb;

    --btn-background: rgba(240, 240, 240, .7);
    --box-background: var(--white-color);
    --main-background: var(--white-color);
    --s-background: var(--white-color); 

    --t-modal-shadow: 0 0px 10px rgba(0, 0, 0, .1);
    --border-radius: 6px;

    // 饿了么组件
    --el-color-primary: var(--t-primary-color);
    --el-color-primary-light-3: fadeout(hsla(172, 48%, 53%, 1), 25%);
    --el-color-primary-dark-2: fadeout(hsla(172, 48%, 53%, 1), 75%);
    --el-color-primary-light-9: fadeout(hsla(172, 48%, 53%, 1), 95%);

    --t-primary-light-color: var(--el-color-primary-light-3);
}
.dark {
    --t-container-background: var(--black-color);

    --t-muted-color: #d6d6d6;       
    --t-light-color: #ebebeb; 

    --t-text-color: var(--white-color);
    --box-background: var(--black-color);
    --btn-background: rgba(40, 40, 40, .7);
    --main-background: #000;
    --s-background: #333; 
}

* { 
    padding: 0; 
    margin: 0; 
}
html, body { 
    height: 100%; 
    font-size: 14px;
    font-family: PingFang SC,Arial,Microsoft YaHei,sans-serif; 
    color: var(--t-text-color); 
    // background-color: var(--t-container-background);
}
a { 
    text-decoration: none;  
    color: var(--color-text-main);
}
a:hover { 
    text-decoration:underline;
}
img { 
    border:none;
}
ol,ul,li { 
    list-style:none;
}
*,*:focus,*:hover, input{ 
    outline:none; 
}
// 滚动条样式
::-webkit-scrollbar { 
    width: 0px;
}
::-webkit-scrollbar-track {
    border-radius: 8px;
    background: transparent;
}
::-webkit-scrollbar-thumb { 
    border-radius: 8px; 
    background: var(--t-light-color);
}
::-webkit-scrollbar-thumb:hover { 
    background: var(--t-muted-color);
}

// 页面布局的宽高
#app, .el-container { width: 100vw; height: 100%; }

// 骨架屏/其他图片占位符需要提供宽高，所以要精确计算
// 页面中心区域的宽度
@menuWidth: 260px;
@sideWidth: 380px;
@paddingW: 40px;
@containerWidth: calc(100vw - @menuWidth - @paddingW - @paddingW);
@mainWidth: calc(@containerWidth - @sideWidth - @paddingW);


// 计算出当前DOM的高度 = 实际高度 / 实际宽度 * 高度
.calcHeight(@w, @ow, @oh) {
    height: calc(@w * @oh / @ow);
}

@import '../fonts/fonts';
@import './el-reset';

